import { dayjs } from "element-plus";
// import { useRouter } from "vue-router";
export default defineComponent({
	setup(props, { expose }) {
		// const router = useRouter();
		const state = reactive({
			tadayAlarm: { executed: 0, nonExecute: 0 },
			yesterdayAlarm: { executed: 0, nonExecute: 0 }
		});
		const loadData = async (result: any) => {
			let data: any = result || {};
			state.tadayAlarm = data[dayjs().format("YYYY-MM-DD")];
			state.yesterdayAlarm = data[dayjs().add(-1, "d").format("YYYY-MM-DD")];
		};
		expose({ loadData: loadData });
		return () => {
			return (
				<>
					<div class="block-title">
						<span>告警概览</span>
						{/* <el-link underline={false} class="more" onClick={() => router.push("/alarm/list")}>
							更多
						</el-link> */}
					</div>

					<div class="alarm-basic-total grid grid-cols-2 items-center" style="height:calc(100% - 45px)">
						<div class="grid grid-cols-2 text-center">
							<div class="item item-1">
								<div class="icon icon-1"></div>
								<div class="label">今日未处理</div>
								<div class="val">{state.tadayAlarm.nonExecute}</div>
							</div>
							<div class="item item-2">
								<div class="icon icon-2"></div>
								<div class="label">今日已处理</div>
								<div class="val">{state.tadayAlarm.executed}</div>
							</div>
						</div>
						<div class="grid grid-cols-2 text-center">
							<div class="item item-3">
								<div class="icon icon-3"></div>
								<div class="label">昨日未处理</div>
								<div class="val">{state.yesterdayAlarm.nonExecute}</div>
							</div>
							<div class="item item-4">
								<div class="icon icon-4"></div>
								<div class="label">昨日已处理</div>
								<div class="val">{state.yesterdayAlarm.executed}</div>
							</div>
						</div>
					</div>
				</>
			);
		};
	}
});
